<template>
    <div style="display: flex; align-items: center;">
        <!--  style="width: 800px; height: 300px;margin-top: 2%;margin-left: 10%;background-color: #ffffff;" -->
        <div class="custom-upload">
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleFileChange"
                :on-remove="handleRemove" :on-preview="handlePictureCardPreview" multiple>
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible" :title=title>
                <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 700px;height: 400px" />
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
// import { uploadImg } from "@/api/system/user"; //这是个人中心上传照片的接口，可以直接拿过

function uploadImg() {

}

const url = ref('http://localhost/dev-api/common/download/resource?resource=')		//这是若依框架后端接口已有的方法
const input = ref('')

const isShow = ref(true)

const fileList = ref([]);
const disabled = ref(false);
const dialogImageUrl = ref('')
const title = ref('')
const dialogVisible = ref(false)

/** 处理文件改变事件 */
async function handleFileChange(file, newFileList) {
    const selectedFile = file.raw;
    const reader = new FileReader();
    reader.readAsDataURL(selectedFile);
    reader.onload = async () => {
        const imageUrl = reader.result;
        if (newFileList.length > 1) {
            newFileList.splice(0, 1);
        }
        // 添加新文件
        fileList.value.push({
            url: imageUrl,
            name: selectedFile.name,
            status: 'finished',
            response: { url: imageUrl }
        });
        dragValue.value = false
        const formData = new FormData();
        formData.append('avatarfile', selectedFile);

        try {
            const response = await uploadEXTENSION(formData);
            //console.log('上传成功:', response.imgUrl);
            input.value = response.imgUrl		//这里拿到的是上传成功后的文件路径地址
        } catch (error) {
            console.error('上传失败:', error);
        }
    };
}

//只需要写一个方法调用下载接口，后面参数带上文件路径地址即可
function download() {
    window.open(url.value + input.value, '_blank');	//这里就会打开一个新窗口弹出文件下载窗口
}

//删除方法
function handleRemove(file, fileList) {
    console.log('移除', file, fileList)
    fileList.value = fileList
}
//预览方法
const handlePictureCardPreview = function (file) {
    dialogImageUrl.value = file.url;
    title.value = file.name;
    dialogVisible.value = true;
}

</script>
<style lang='scss' scoped>
.custom-upload {
    // width: 148px;
    // height: 148px;
    // width: 48px;
    // height: 48px;
    // overflow: hidden;
    // border: 0px;
    // margin-top: 2%;
    // margin-left: 10%;
    // background-color: #ffffff;
}

:deep(.el-upload--picture-card) {
    border: 0px;
    background-color: #f3f3f3;
}
</style>